import cn from 'classnames';
import PropTypes from 'prop-types';
import React from 'react';
import ECharts from '@kuiper-components/echarts';
import ChartTitle from '../../../../../components/ChartTitle';
import s from './style.module.css';
import moment from 'moment'

const lineOptionEmpty = (st, et) => {
	return {
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'cross',
			},
			backgroundColor: '#fff',
			textStyle: '#696C78',
			extraCssText:
				'width: 10rem;padding:1rem;line-height:1rem;margin: 0 auto;box-shadow: 0 4px 4px -1px rgba(0, 0, 0, 0.2);',
		},
		legend: {
			data: ['暂无数据'],
		},
		series: [
			{
				name: '暂无数据',
				data: [
					[st, 0],
					[et, 0],
				],
				type: 'line',
				smooth: false,
				showSymbol: false,
			},
		],
		xAxis: {
			type: 'time',
			boundaryGap: false,
			splitLine: { show: false },
			axisLine: { lineStyle: { color: 'transparent' }, show: false },
			axisTick: {
				show: false
			},
			axisLabel: {
				margin: 20,
				align: 'left',
			},
		},
		yAxis: {
			type: 'value',
			axisLabel: {
				show: true,
				interval: 'auto',
				formatter: '{value} ms',
			},
			axisLine: { show: false },
			axisTick: { lineStyle: { opacity: 0 } },
			splitLine: { lineStyle: { color: '#F7F9FC' } },
		},
		textStyle: { color: '#696C78', fontSize: 12 },
	};
};

function ResponseTime({ className, resultNumbers, keyStr }) {
	let st = new Date(new Date().getTime() - 3600 * 24 * 1000).toISOString();
	let et = new Date().toISOString();
	if (resultNumbers.length && resultNumbers[0].id === 'empty') {
		st = resultNumbers[0].datetime;
		et = resultNumbers[1].datetime;
	}
	const [myChart, setChart] = React.useState(undefined);

	const lineOption = Object.assign({}, lineOptionEmpty(st, et));

	const [linesOption, setLinesdata] = React.useState(lineOption);
	React.useMemo(() => {
		let lineData = {};
		for (let i = 0; i < resultNumbers.length; i++) {
			const datetime = resultNumbers[i].datetime;
			const detail = resultNumbers[i]?.aviliable;
			for (let j = 0; j < detail.length; j++) {
				if (!lineData[detail[j].area]) {
					lineData[detail[j].area] = [];
				}
				lineData[detail[j].area].push([datetime, detail[j].totalTime]);
			}
		}
		lineData = Object.keys(lineData).reduce((t, key) => {
			t[key] = lineData[key].sort((a, b) => { return moment(a[0]).unix() - moment(b[0]).unix()})
			return t
		}, {})
		let legend = [];
		let line = [];
		line = Object.entries(lineData).map(([name, data]) => {
			legend.push(name);
			const res = {
				name,
				data,
				type: 'line',
				smooth: false,
				showSymbol: false,
			};
			return res;
		});

		if (line.length === 0) {
			line = [
				{
					// name: '暂无数据',
					data: [
						[moment().startOf('day').toDate(), 0]
					],
					type: 'line',
					smooth: false,
					showSymbol: false,
					lineStyle: {
						width: 0
					}
				},
			];
			lineOption.tooltip.show = false
			lineOption.yAxis.splitNumber = 5
			lineOption.xAxis.maxInterval = 3600 * 24 * 1000
			lineOption.yAxis.max = 1000
			lineOption.yAxis.min = 0
		}
		lineOption.series = line;
		lineOption.legend.data = legend;
		const linesdata = Object.assign({}, lineOption);
		setLinesdata(linesdata);
		if (myChart) {
			myChart.clear()
			myChart.setOption(lineOption);
		}
	}, [resultNumbers, keyStr]);
	const getChart = e => {
		setChart(e);
	};

	return (
		<div className={cn(className, s.responseTime)}>
			<div className={s.head}>
				<ChartTitle className={s.title}>平均响应时间</ChartTitle>
			</div>
			{resultNumbers.length && resultNumbers[0]?.id === 'empty' ? (
				<ECharts className={s.chart} option={linesOption} key={keyStr} getInstance={getChart} />
			) : (
				<ECharts className={s.chart} option={linesOption} key={keyStr + '1'} getInstance={getChart} />
			)}
		</div>
	);
}

ResponseTime.propTypes = {
	className: PropTypes.string,
	keyStr: PropTypes.string,
	resultNumbers: PropTypes.arrayOf(
		PropTypes.shape({
			datetime: PropTypes.date,
			aviliable: PropTypes.arrayOf(
				PropTypes.shape({
					area: PropTypes.string,
					respTime: PropTypes.number,
				})
			),
		})
	),
};
ResponseTime.defaultProps = {
	className: '',
};

export default ResponseTime;
